<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        :adaptive = "fixOption"
        height="100px"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        method="get">
      <el-table-column label="操作" slot="append" width="250px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" @change="handleSwitch($event,scope.row)"></el-switch>
          <el-button  plain size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </table-pagination>

    <el-dialog title="税率设置" :visible.sync="setTax" width="30%" center>
      <el-form ref="rateForm" :model="siteTax"  label-width="120px" :rules="rules">
        <template>
          <el-form-item label="国家/地区：" prop="countryName">
            <span style="padding-left: 10px">{{ siteTax.countryName }}</span>
          </el-form-item>
          <el-form-item label="税率：" prop="rate">
            <el-input v-model="siteTax.rate" placeholder="请输入税率" style="width: 193px"/>
            <span>%</span>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="saveRate('rateForm')" >
            确定
          </el-button>
          <el-button @click="setTax = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import { getSiteTaxPage, updateSiteTax } from '@/api/site';
export default {
    name: 'tax-list',
    components: {
        TablePagination
    },
    data () {
        return {
            fixOption: {fixedHeader: true},
            list: null,
            listLoading: true,
            loadingBtn: false,
            pageParams: {
                page: 1,
                pageSize: 20,
                searchText: ''
            },
            setTax: false,
            siteTax: {
                id: '',
                countryName: '',
                countryCode: '',
                rate: '',
                enable: ''
            },
            formOptions: {
                showResetBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    { prop: 'searchText', label: '国家/地区', placeholder: '请输入国家/地区' }
                ]
            },
            columns: [
                {label: '国家/地区', prop: 'countryName'},
                {
                    label: '税率',
                    prop: 'rate',
                    render: row => {
                        if (row.rate) {
                            return row.rate + '%';
                        }
                        return 0;
                    }
                }
            ],
            rules: {
                rate: [
                    {required: true, message: '区间为0-99.99', trigger: 'blur', pattern: '/^\\d\\.([1-9]{1,2}|[0-9][1-9])$|^0$|^[1-9]\\d{0,1}(\\.\\d{1,2}){0,1}$|^100(\\.0{1,2}){0,1}$/'}
                ]
            },
            tableData: []
        };
    },
    methods: {
        getData (params) {
            this.pageParams.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getSiteTaxPage({...this.pageParams, ...params}).then((res) => {
                    resolve(res);
                });
            });
        },
        handleEdit (entity) {
            this.siteTax = JSON.parse(JSON.stringify(entity));
            this.setTax = true;
        },
        saveRate () {
            this.$refs.rateForm.validate(valid => {
                if (valid) {
                    updateSiteTax(this.siteTax).then(res => {
                        this.$message.success('保存成功');
                        this.setTax = false;
                        this.$refs['el-search-table'].searchHandler(true);
                    }).catch(() => {});
                }
            });
        },
        handleSwitch (event, entity) {
            this.siteTax = entity;
            this.siteTax.enable = event;
            updateSiteTax(this.siteTax).then(res => {
                this.$message.success('修改成功');
                this.$refs['el-search-table'].searchHandler(true);
            }).catch(() => {
            });
        }
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>
